<template>
  <div>
    <filter-container 
      ref="filterContainer"
      :total="total" 
      :search-placeholder="searchPlaceholder"
      :show-delete-filter="showDeleteFilter"
      :show-search-input="showSearchInput"
      @search="handleFilter"
    >
      <template #filter-items>
        <slot name="filter-items"></slot>
      </template>
      <template #action-buttons>
        <slot name="action-buttons" :selection="multipleSelection"></slot>
      </template>
      <template #selection-info>
        <span v-if="multipleSelection.length > 0" class="selection-info">
          已选择 <span class="selection-count">{{ multipleSelection.length }}</span> 条数据
        </span>
      </template>
    </filter-container>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange"
      class="custom-table"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        fixed="left"
      />
      <slot name="table-columns"></slot>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      :page-sizes="[50, 100, 200, 500]"
      @pagination="handlePagination"
      class="pagination-container"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import FilterContainer from '@/views/shipping/components/FilterContainer'

export default {
  name: 'ShippingTable',
  components: { Pagination, FilterContainer },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    listLoading: {
      type: Boolean,
      default: false
    },
    listQuery: {
      type: Object,
      default: () => ({})
    },
    searchPlaceholder: {
      type: String,
      default: '请输入搜索关键词'
    },
    showDeleteFilter: {
      type: Boolean,
      default: true
    },
    showSearchInput: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('selection-change', val)
    },
    handleFilter() {
      this.$emit('filter')
    },
    getList() {
      this.$emit('get-list')
    },
    handlePagination(params) {
      this.$emit('pagination-change', params)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/shipping-common.scss';
</style>
